<template>
  <div
    class="sc-collapse-item"
    :class="{
      'is-disabled': disabled,
    }"
  >
    <div
      class="sc-collapse-item__header"
      :id="`sc-collapse-item_header${name}`"
      @click="collapseTitleClick"
    >
      <slot name="collapseItemHeader">
        {{ title }}
      </slot>
      <!-- <ScIcon icon="angle-right"  class="sc-collapse-item__arrow" :class="{'is-active':activeFlag}"></ScIcon> -->

      <ScIcon
        icon="angle-right"
        class="sc-collapse-item__arrow"
        :class="{
          'is-active': activeFlag
        }">
      </ScIcon>
    </div>
    <Transition name="collapse" v-on="transitionEvents">
      <div class="sc-collapse-item__wrap" v-show="activeFlag">
        <div class="sc-collapse-item__content" :id="`sc-collapse-item_body${name}`">
          <slot name="collapseItemBody"></slot>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script lang="ts">
export default {
  name: "ScCollapseItem",
};
</script>

<script lang="ts" setup>
import { computed, inject } from "vue";
import type { collapseItemProps } from "./types";
import { collapseContextKey } from "./types";
import ScIcon from "../theIcon/ScIcon.vue";
const props = withDefaults(defineProps<collapseItemProps>(), {
  name: "",
  disabled: false,
  title: "",
});
const collapseContext = inject(collapseContextKey);
function collapseTitleClick() {
  if (props.disabled) {
    return;
  }
  collapseContext?.itemClick(props.name);
}
const activeFlag = computed(() => collapseContext?.activeNames.value.includes(props.name));
// Transition的事件列表
const transitionEvents: Record<string, (el: HTMLElement) => void> = {
  beforeEnter: (el) => {
    el.style.height = "0px";
  },
  enter: (el) => {
    el.style.height = `${el.scrollHeight}px`;
  },
  afterEnter: (el) => {
    el.style.height = "";
  },
  beforeLeave: (el) => {
    el.style.height = `${el.scrollHeight}px`;
  },
  leave: (el) => {
    el.style.height = "0px";
  },
  afterLeave: (el) => {
    el.style.height = "";
  },
};
</script>
<style scoped>
@import "./style.css";
</style>
